UX ベストプラクティス II
二つのUXに関する記事をまとめたいと思います。
ダブルクリックについて
同じボタンをダブルクリックすることは問題を引き起こすかもしれませんが(例えば、同じ商品を二回カートに入れるとか)、たくさんのウェブサイトはダブルクリックだという行動をあまりよく取り扱っていません。
一回クリックするとボタンが非活性になるという解決方法は複雑ではないが、ウェブデザイナーは自分がしない行為をあまり考えないらしいです。しかし、Baymardの研究によると、10%のユーザー(大体は50歳以上の人)はまだボタンとリンクをダブルクリックしています。その上、ボタンをダブルクリックしている人がますます増えています。なぜかと言えば、モバイルウェブサイトからの返事が時々遅いからです。例えば、ユーザーが携帯でモバイルウェブサイトのボタンをクリックする時に、そのウェブサイトの返事が遅くなったら、一部のユーザーはまたクリックします。ボタンをクリックしたら何かのレスポンスを表示すると(例えば、スピナーと言うローディングアイコンとか)このようなことを解決できます。
onuma.iconクリックしたくなる気持ちわかる
難しいところはダブルクリックの問題を解決ではなく、ダブルクリックという問題があるということです。なので、ユーザビリティテストはデザインチームにとってはとても重要です。
/icons/hr.icon
二つ目の記事はbaymardからではなく、 NN/g (Nielson Norman Group) という会社からです。NN/gもUXについての研究をたくさんしています。
キャンセル vs 閉じる
ユーザーは画面を閉じろうとしたが、「X」を押下したら入力したデータが消えてしまう時に、少し不愉快になるかもしれません。現代のインターフェイスには、「X」ボタンはキャンセルと閉じるの二つの意味がありますが、どのようにしてその二つを見分けるでしょうか?生憎ですが、時々見分けることができません。
ただ画面を閉じたいなら「X」の細かい意味はあまり重要じゃないが、音楽を流し続けたいや入力したデータと関係があるなどの場合なら、見分けることがとても重要になります。そのため、いくつかの解決方法があります:
1. ユーザーの確認を求める
2. 曖昧なアイコンではなく、明白的なラベルを使う
3. 二つのボタンを表示する:「X」ボタンは入力したデータを保存して画面を閉じて、キャンセルボタンはデータを放棄して画面を閉じる
1. ユーザーの確認を求める
ユーザーがある動作をしたら「X」を押下と、UIは画面を閉じる前に、まずユーザーの確認を求めることができます。
https://gyazo.com/0d6bd21fbcc929d376f4874430978e40
DuoLingo のレッスンは完成あるいは未完成という二つの状態だけがありますので、ユーザーが途中で「X」を押下後したら、DuoLingoが進捗がなくなるとユーザーに伝えます。
2. 明白的なラベルを使う
「X」ボタンではなく、テキストラベルを使うと問題がありません。
https://gyazo.com/75575da2a3869822f8c4a8befaa7b568
Etsy は二つのボタンを表示しています:clearを押下と、ユーザーが入力したことがリセットして、doneを押下と、ユーザーが入力したことをまず保存したら画面を閉じます。
3. 閉じる前に保存する
「X」ボタンを使う場合には、念のために「X」ボタンを押下とデータを保存して、別個のキャンセルボタンを表示した方がいいです。こうすると、キャンセルと閉じるを見分けることができます。
https://gyazo.com/94bb465af6413c9924e1cef9ce0aa507
Gmail はゴミ箱アイコンでキャンセルボタンを表示して、「X」ボタンにホバーすると、保存して閉じるという意味がわかります。
まとめ
まずユーザーのデータを保存して、画面を閉じた方がいいです。
onuma.icon 結構ためになる情報でした!😄
👍 Nishiyama Yudai nishiyamayudai.icon がいいねしました on 2020/5/11
👍 onuma onuma.icon がいいねしました on 2020/5/11